<template>
  <div class="hello">
  	<div class="box">
		<div class="list">
			<ul>
				<li v-for="obj in arr"><img v-bind:src="obj.imgUrl" alt="" /></li>
			</ul>
		</div>
		<div class="list1">
			<mt-swipe :show-indicators="false" :auto="3000">
			  <mt-swipe-item v-for="obj in arr" :key ="obj.id"><img v-bind:src="obj.imgUrl" alt="" /></mt-swipe-item>
			</mt-swipe>
		</div>
  	</div>
  	<div class="hello-main1">
		<ul>
			<router-link to="/china">
				<li>
					<img src="../assets/1.png" alt="">
				</li>
			</router-link>
			<router-link to="/foreign">
				<li>
					<img src="../assets/2.png" alt="">
				</li>
			</router-link>
			<router-link to="/lv">
				<li>
					<img src="../assets/3.png" alt="">
				</li>
			</router-link>
			<!-- <router-link to="/ding"> -->
				<li>
					<img src="../assets/4.png" alt="">
				</li>
			<!-- </router-link> -->
			<!-- <router-link to="/jiudian"> -->
				<li>
					<img src="../assets/5.png" alt="">
				</li>
			<!-- </router-link> -->
		</ul>
	  </div>
  </div>
  
</template>

<script>
import $ from 'jquery'
import obj from '../data/banner.json'
var timer;
export default {
  name: 'hello',
  data(){
  	return {
  		arr:obj.data.title,
  	}
  },
  mounted:function(){
  	var cArr=["p4","p3","p2","p1","p0","p6","p5"];
  	$('.list li').each(function(i){
		$('.list li').eq(i).attr('class',cArr[i]);
	});
	var index = 0;
	//上一张
	function previmg(){
		cArr.unshift(cArr[6]);
		cArr.pop();
		$(".list li").each(function(i,e){
			$(e).removeClass().addClass(cArr[i]);
		})
		index--;
		if (index<0) {
			index=6;
		}
	}

	//下一张
	function nextimg(){
		cArr.push(cArr[0]);
		console.log(cArr);
		cArr.shift();
		console.log(cArr);
		$(".list li").each(function(i,e){
			$(e).removeClass().addClass(cArr[i]);
		})
		index++;
		if (index>6) {
			index=0;
		}
	}
	// //点击class为p2的元素触发上一张照片的函数
	// $(document).on("click",".p3",function(){
	// 	previmg();
	// 	return false;//返回一个false值，让a标签不跳转
	// });
	// //点击class为p4的元素触发下一张照片的函数
	// $(document).on("click",".p5",function(){
	// 	nextimg();
	// 	return false;
	// });
	// //鼠标移入box时清除定时器
	// $(".box").mouseover(function(){
	// 	clearInterval(timer);
	// })

	// //鼠标移出box时开始定时器
	// $(".box").mouseleave(function(){
	// 	timer=setInterval(previmg,3000);
	// })

	//进入页面自动开始定时器
	timer = setInterval(previmg,3000);
  },
  beforeDestroy:function(){
  	clearInterval(timer);
  }
}

</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss">
*{
	margin: 0;
	padding: 0;
}
.box{
	width: 100%;
	height: 220px;
	position: relative;
	overflow: hidden;
	.list{
		width: 700px;
		height: 200px;
		overflow: hidden;
		position: absolute;
		left: 50%;
		margin-left: -395px;
		li{
			position: absolute;
			top: 0;
			left: 0;
			list-style: none;
			opacity: 0;
			transition: all 0.3s ease-out;
			padding-top: 20px;
			border-radius: 20px;
			overflow: hidden;
			img{
				width: 340px;
				border:none;
				float: left;
				border-radius: 20px;
			}
		}
		.p6{
			transform:translate3d(-224px,0,0) scale(0.81);
		}
		.p5{
			transform:translate3d(-60px,0,0) scale(0.81);
			transform-origin:0 50%;
			opacity: 0.8;
			z-index: 2;
		}
		.p4{
			transform:translate3d(224px,0,0) scale(1);
			z-index: 3;
			opacity: 1;
		}
		.p3{
			transform:translate3d(510px,0,0) scale(0.81);
			transform-origin:100% 50%;
			opacity: 0.8;
			z-index: 2;
		}
		.p2{
			transform:translate3d(672px,0,0) scale(0.81);
		}
		.p1{
			transform:translate3d(896px,0,0) scale(0.81);
		}
		.p0{
			transform:translate3d(1120px,0,0) scale(0.81);
		}
	}
	.list1{
		width: 100%;
		height: 100%;
		img{
			width: 100%;
			opacity: 0.5;
		}
	}
}

.hello-main1{
	width: 100%;
	margin-bottom: 65px;
	li{
		width: 100%;
		text-align: center;
		margin: 3px 0 0 0;
		img{
			width: 98%;
		}
	}
}

</style>
